<template>
  <div class="wuliu">
    <top></top>
    <div style="padding: 20px;">
      <div @click="goback" style="margin-bottom: 20px;cursor: pointer;background-color: #F5F5F5;border-radius: 50px;width: 50px;padding: 8px;text-align: center;font-size: 14px;">< 返回</div>
      <div class="kflex">
        <div :class="act == 1?'actli act':'act'" @click="act = 1">
          管理号码
          <div :class="act == 1?'t_line_lei t_line':'t_line'" ></div>
        </div>
        <div :class="act == 2?'actli act':'act'" @click="act = 2">
          号码报表
          <div :class="act == 2?'t_line_lei t_line':'t_line'" ></div>
        </div>
      </div>
      <div style="padding-top: 20px;">
        <haomaguanli v-if="act == 1"></haomaguanli>
        <haomabaobiao v-if="act == 2"></haomabaobiao>
      </div>
    </div>
  </div>
</template>

<script>
  import top from '../top.vue'
  import haomaguanli from './haomaguanli.vue'
  import haomabaobiao from './haomabaobiao.vue'
  import hmdaorujilu from './hmdaorujilu.vue'
  import axios from 'axios'
  export default {
    name: "wuliu",
    components:{
      haomaguanli,haomabaobiao,top
    },
    data() {
      return {
        act:1,
        shopid:""
      }
    },
    created() {
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
    },
    mounted() {

    },
    methods: {
      goback(){
        this.$router.push('/gongju/shanghao')
      }
    }
  }
</script>
<style  scoped>
.t_line{
  width: 20px;
  height: 4px;
  border-radius: 10px;
  background-color: white;
}
.t_line_lei{

  background-color: #2974FF;
}
</style>
<style lang="scss" scoped>
  .wuliu {
    .act{ width: 112px; line-height: 36px; font-weight: bold; border-radius: 18px; text-align: center; cursor: pointer;font-size: 20px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .actli{  color: #2974FF !important; }
    .fen{
      .el-button--danger{
            color: #2974FF;
            background-color: #EEF7FF;
            border-color: #EEF7FF;
      }

    }
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
